<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%
String path=request.getContextPath();
%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=path %>/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function () {
	$("#homepage").on("click","#movie_collect",function(){//只显示一个div 电影收藏
		$("#collect_list").css("display","block");
		$("#concern_list").css("display","none");
		$("#comment_list").css("display","none");
		$("#message_list").css("display","none");
		
})
})
$(function () {
	$("#homepage").on("click","#my_concern",function(){//只显示 我的关注
		$("#collect_list").css("display","none");
		$("#concern_list").css("display","block");
		$("#comment_list").css("display","none");
		$("#message_list").css("display","none");
	})
})
$(function () {
	$("#homepage").on("click","#my_comment",function(){//只显示我的评论
		$("#collect_list").css("display","none");
		$("#concern_list").css("display","none");
		$("#comment_list").css("display","block");
		$("#message_list").css("display","none");
	})
})
$(function () {
	$("#homepage").on("click","#my_message",function(){//只显示我的消息
		$("#collect_list").css("display","none");
		$("#concern_list").css("display","none");
		$("#comment_list").css("display","none");
		$("#message_list").css("display","block");
	})
})

</script>
 <style>
            body{
                background: #f5f5f5;
            }
            #homepage{
                margin: 10px auto;
                width: 900px;    
                height: 1000px;
                border-radius: 5px; 
            }
            #homepage #top{
                width: 100%;
                height: 250px;
                background: white;
                border-radius: 5px;
                box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
            }
            #homepage #top #back{
                width: 100%;
                height: 160px;
                border-top-right-radius: 5px;
                border-top-left-radius: 5px;
                background-image: url(homepage.jpg);
                background-size:cover;
            }
            #homepage #top span{
                font-size: 30px;
                font-weight: 550;
            }
            #homepage #top #person_info{
                margin-left: 520px; 
                font-size: 15px; 
            }
            #homepage #mid{
                margin-top: 10px;
                width: 100%;
                height: 650px;
                border-radius: 5px;
                background: white;
                box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
            }
            #homepage #profile_photo{
                float: left;
                width: 250px;
                height: 250px;     
            }
            #homepage #profile_photo img{
                position: absolute;
                width: 150px;
                height: 150px;
                border: 10px solid white;
                border-radius: 10px;
                margin-top: 40px;
                margin-left: 40px;
            }
            #homepage #subfield{
                height: 40px;
                 
                text-align: center;
            }
            #homepage #subfield ul{
                height: 100%;
                list-style: none;
            }
            #homepage #subfield ul li{
                margin-left: 0px;
                width: 200px;
                float: left;
                line-height: 45px;
            }
            #homepage #subfield ul li a{
                text-decoration: none; 
                color: black;
            }
            #homepage #mid hr{
                border: #f5f5f5 1px solid;
                border-bottom: none;  
                
            }
            #homepage #mid #collect_list{
                width: 99%;
                border-radius: 5px;
                display: none;
            }
            #homepage #mid #message_list{
                width: 99%;
                border-radius: 5px;
                display: none;
            }
            #homepage #mid #concern_list{
                width: 99%;
                border-radius: 5px ;
                display: none;
                 
            }
            #homepage #mid #comment_list{
                width: 99%;
                border-radius: 5px;
                display: none;
            }
        </style>
</head>
<body>
 <div id="homepage">
            <div id="top">
                <div id="profile_photo">
                    <img src="1.bmp">
                </div>
                <div id="back"></div>
                <span>用户名</span>
                <br><br>
                <a id="person_info" href="javascript:">编辑个人资料</a>
            </div>
            <div id="mid">
                <div id="subfield">
                    <ul>
                        <li><a href="javascript:" id="movie_collect">电影收藏</a></li>
                        <li><a href="javascript:" id="my_concern">我的关注</a></li>
                        <li><a href="javascript:" id="my_comment">我的评论</a></li>
                        <li><a href="javascript:" id="my_message">消息</a><span>(未查看的消息个数)</span></li>
                    </ul>
                </div>
                <hr>
                <div id="collect_list">
                 我的收藏
                </div>
                <div id="concern_list">
            我的关注    
                </div>
                <div id="comment_list">
          我的评论          
                </div>
                <div id="message_list">
                消息
                </div>
            </div>
            
        </div>

</body>
</html>